<template>
  <div id="container"></div>
</template>

<script setup>
import * as THREE from "three";
import { onMounted } from "vue";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
// 创建场景
// 场景能够让你在什么地方、摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方。
const scene = new THREE.Scene();
// 添加背景颜色
scene.background = new THREE.Color(0x666666);

// 创建相机
const camera = new THREE.PerspectiveCamera();
camera.position.y = 3;
camera.position.z = 10;

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );

// 创建一个三维向量
const vector = new THREE.Vector3(1, 1, 1)



const cube = new THREE.Mesh( geometry, material );
// console.log(cube.position, 'position')
// cube.position.set(1, 1, 1)
// cube.position.x = 1
cube.position.add(vector)
cube.position.addScalar(1)
console.log(cube.position.clone(), '当前位置')

// 局部缩放
// cube.scale = new THREE.Vector3(2, 1, 1) // 这种写法是错误的，属性是只读的
// cube.scale.set(2, 3, 3)

// 平移
// cube.translateX(1)

// console.log(cube.position, 'vector')


// // 显示与隐藏
// cube.visible = true


// 分组
const cubeA = new THREE.Mesh( geometry, material );
cubeA.position.set( 1, 1, 1 );

const cubeB = new THREE.Mesh( geometry, material );
cubeB.position.set( -1, -1, -1 );

//create a group and add the two cubes
//These cubes can now be rotated / scaled etc as a group
const group = new THREE.Group();
group.add( cubeA );
group.add( cubeB );
console.log(group, 'group')
group.position.x = 2
scene.add( group );


// scene.add(cube)

// 添加坐标辅助线
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

onMounted(() => {
  // 创建渲染器
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 将渲染器添加到页面
  document.getElementById("container").appendChild(renderer.domElement);

  // 添加轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement);

  // 让立方体动起来
  function animate() {
    // 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
    requestAnimationFrame(animate);

    // 轨道控制器更新
    controls.update();
    renderer.render(scene, camera);
  }
  animate();
});
</script>